<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/bootstrap4.5.min.css">
    <link rel="stylesheet" href="./css/swiper-bundle.min(2).css">
    <script src="./js/swiper-bundle.min(2).js"></script>
    <title>雕塑文化</title>
    <style>
        li {
            list-style: none;
        }
        
        ul {
            margin: 0;
            padding: 0;
        }
        
        .row {
            margin: 0;
        }
        
        @media (min-width:576px) {
            .container {
                max-width: 576px;
                padding: 0;
            }
        }
        
        @media (min-width:768px) {
            .container {
                max-width: 768px;
                padding: 0;
            }
        }
        
        @media (min-width:992px) {
            .container {
                max-width: 992px;
                padding: 0;
            }
        }
        
        @media (min-width:1200px) {
            .container {
                max-width: 1200px;
                padding: 0;
            }
        }
        
        .Sculpture_title {
            text-align: center;
        }
        
        .Sculpture_title h2 {
            font-weight: 700;
        }
        
        .Sculpture_title span {
            color: #aaaaaa;
        }
        
        .Sculpture_title p {
            color: #999999;
        }
        
        .Sculpture_list_img img {
            width: 100%;
        }
        
        .Sculpture_list_title {
            display: flex;
            justify-content: space-between;
        }
        
        .Sculpture_list_title span {
            font-size: 14px;
            color: #999;
            line-height: 24px;
        }
        
        .Sculpture_list_box p {
            margin-top: 18px;
            font-size: 14px;
            color: #666;
            line-height: 1.7;
        }
        
        .Sculpture_list_box a {
            display: block;
            width: 75px;
            height: 28px;
            line-height: 28px;
            text-align: center;
            padding: 0 8px;
            border: 1px solid #e5e5e5;
            margin-top: 12px;
            margin-right: 15px;
            border-radius: 5px;
            color: #999;
            font-size: 12px;
            text-decoration: none;
        }
        
        .Sculpture_list_box {
            padding: 20px 10px;
        }
        
        .Sculpture_list_box:nth-child(odd) {
            margin-top: 100px;
            border-bottom: 1px solid #eee;
        }
        
        .Sculpture_list_box:hover {
            transition: 0.6s;
            box-shadow: 0 0 20px #eee;
        }
        
        @media(max-width:768px) {
            .Sculpture_list_box:nth-child(odd) {
                margin-top: 10px;
            }
        }
    </style>

</head>

<body>


    <div class="Sculpture">
        <div class="container">
            <div class="Sculpture_title">
                <h2>雕塑文化</h2>
                <span>CULTYRE</span>
                <p>美学设计营造美好生活景观</p>
            </div>
            <div class="Sculpture_list row">
                <div class="col-lg-4 col-md-4 col-12">
                    <div class="Sculpture_list_box">
                        <div class="Sculpture_list_title">
                            <h6>
                                大型城市雕塑在极端环境下的弹性分析
                            </h6>
                            <span>2020-03-10</span>
                        </div>
                        <p>大型城市雕塑在极端环境下会承受来自不同程度的影响，如果达不到要求，就会出现严重的后果...</p>
                        <a href="#">行业知识</a>
                    </div>
                    <div class="Sculpture_list_box">
                        <div class="Sculpture_list_title">
                            <h6>
                                大型城市雕塑在极端环境下的弹性分析
                            </h6>
                            <span>2020-03-10</span>
                        </div>
                        <p>大型城市雕塑在极端环境下会承受来自不同程度的影响，如果达不到要求，就会出现严重的后果...</p>
                        <a href="#">行业知识</a>
                    </div>
                </div>
                <div class="col-lg-4 col-md-4 col-12">
                    <div class="Sculpture_list_img">
                        <div class="swiper-container">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide"><img src="./img/Sculpture/img1.webp" alt=""></div>
                                <div class="swiper-slide"><img src="./img/Sculpture/img2.webp" alt=""></div>
                                <div class="swiper-slide"><img src="./img/Sculpture/img3.webp" alt=""></div>
                                <div class="swiper-slide"><img src="./img/Sculpture/img4.webp" alt=""></div>
                            </div>
                            <!-- 如果需要分页器 -->
                            <div class="swiper-pagination"></div>
                        </div>
                        <script>
                            var swiper = new Swiper('.swiper-container', {
                                spaceBetween: 30,
                                centeredSlides: true,
                                autoplay: {
                                    delay: 2500,
                                    disableOnInteraction: false,
                                },
                                pagination: {
                                    el: '.swiper-pagination',
                                    clickable: true,
                                },
                                navigation: {
                                    nextEl: '.swiper-button-next',
                                    prevEl: '.swiper-button-prev',
                                },
                            });
                        </script>

                    </div>
                </div>
                <div class="col-lg-4 col-md-4 col-12">
                    <div class="Sculpture_list_box">
                        <div class="Sculpture_list_title">
                            <h6>
                                大型城市雕塑在极端环境下的弹性分析
                            </h6>
                            <span>2020-03-10</span>
                        </div>
                        <p>大型城市雕塑在极端环境下会承受来自不同程度的影响，如果达不到要求，就会出现严重的后果...</p>
                        <a href="#">行业知识</a>
                    </div>
                    <div class="Sculpture_list_box">
                        <div class="Sculpture_list_title">
                            <h6>
                                大型城市雕塑在极端环境下的弹性分析
                            </h6>
                            <span>2020-03-10</span>
                        </div>
                        <p>大型城市雕塑在极端环境下会承受来自不同程度的影响，如果达不到要求，就会出现严重的后果...</p>
                        <a href="#">行业知识</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>